<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <svg width="660" height="600" style="background: #efefef;"></svg>
  <script>

    var margin = { top: 60, bottom: 60, left: 60, right: 60 }

    var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

    var scaleLinear = d3.scaleLinear().domain([0, d3.max(dataset)]).range([60, 400])

    var index = [0, 1, 2, 3, 4];
    var color = ['red', 'blue', 'green', 'yellow', 'black']
    var ordinal = d3.scaleOrdinal().domain(index).range(color)

    var colors = d3.schemeCategory10;


    //1：绘制画布
    var svg = d3.select('svg')
    var g = svg.append('g')
      .attr("transform", "translate(" + margin.top + "," + margin.left + ")")

    var rectHeight = 30;

    g.selectAll('rect')
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", 20)
      .attr("y", function (d, i) {
        return i * rectHeight;
      })
      .attr('height', rectHeight - 5)
      .attr('width', function (d, i) {
        console.log(scaleLinear(d))
        return scaleLinear(d);
      })
      .style('fill', function (d, i) {
        // return ordinal(i);
        return colors[i];
      })

    var xScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 400])
    var xAxis = d3.axisBottom(xScale).ticks(7);
    g.append('g')
      .attr('class', "axis")
      .attr("transform", "translate(20," + dataset.length * rectHeight + ")")
      .call(xAxis)



  </script>

</body>

</html>